﻿<!DOCTYPE html>
<html>
<head>
  <title></title>
  <link href="/style/rightdirectory.css" rel="stylesheet"/>
  <script src="/script/config.js"></script>
  <style>
    .input-control-label-left{
      width: auto;
    }
    .checkbox {
      float: left;
      margin-top:0;
    }
    .checkbox+.checkbox{
      margin-top: 0;
    }
    #addSku,#modifySku{
      float: right;
      margin-right: 10px;
    }
    h5{
      width: 100%;
      height: 32px;
      line-height: 32px;
    }
  </style>
</head>

<body>
<h5>产品sku列表 <button class="btn btn-info" id="modifySku">修改</button><button class="btn btn-primary" id="addSku">添加</button></h5>
<!--产品SKU信息-->
<div class="tab-pane sku" id="tabContent4">
  <div class="panel"></div>
  <div class="panel-group" id="accordionPanels" aria-multiselectable="true"></div>
</div>
</body>
</html>
<link href="/script/valid/css/tr.css" rel="stylesheet"/>
<script src="/script/valid/form-valid.js?v=2018"></script>
<script src="/script/plugins/upload/js/config.js"></script>
<script type="text/html" id="all">
  <div class="panel-body sku-config">
    <div class="input-control has-label-left">
      <input id="SkuName" type="text" class="form-control" placeholder="" value="{{SkuName}}">
      <label for="SkuName" class="input-control-label-left">SKU名称:</label>
    </div>
    <div class="input-control has-label-left">
      <input id="OriginalPrice" type="text" class="form-control" placeholder="" value="{{OriginalPrice}}">
      <label for="OriginalPrice" class="input-control-label-left">原价:</label>
    </div>
    <div class="input-control has-label-left">
      <input id="SellPrice" type="text" class="form-control" placeholder="" value="{{SellPrice}}">
      <label for="SellPrice" class="input-control-label-left">目前价格:</label>
    </div>
    <div class="input-control has-label-left">
      <input id="Inventory" type="text" class="form-control" placeholder="" value="{{Inventory}}">
      <label for="Inventory" class="input-control-label-left">商品库存:</label>
    </div>
    <div class="input-control has-label-left" style="width: 200px">
      <label for="skuImgs" class="input-control-label-left">sku选择图片:</label>
      <div id="skuImgs" style="float: right">
        {{if pageid>0}}
        <img id="img-src" class="col-md-1 col-sm-3" data-form="Pic" src="{{SkuPropertyPic}}"
             style="width:60px;height:40px;margin-bottom:10px;"/>
        {{else}}
        <img id="img-src" class="col-md-1 col-sm-3" src="/img/logo.png"
             style="width:60px;height:40px;margin-bottom:10px;"/>
        {{/if}}
        <input type="hidden" id="Pic" data-form="Pic" value="{{SkuPropertyPic}}"/>
        <button class="btn btn-success y-btn" type="button" id="imgUpload" onclick="btnimg()">添加</button>
      </div>
    </div>
  </div>
</script>
<!--SKU_Value选项模板-->
<script type="text/html" id="SkuValue">
  <div class="panel panel-default sku_key_item sku_key_item{{item.Id}}">
    <div class="panel-heading" id="heading{{item.Id}}">
      <h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordionPanels" href="#collapse{{item.Id}}">{{item.AttrName}}</a></h4>
    </div>
    <div id="collapse{{item.Id}}" class="panel-collapse collapse">
      <div class="panel-body key' + item.Id + '">[[sku_value{{item.Id}}]]</div>
    </div>
  </div>
</script>
<!--SKU_Value_Checkbox选项模板-->
<script type="text/html" id="SkuValueCheckBox">
  <div class="checkbox" onclick="EditSKUOfData(this)">
    <label class="checkbox-reset">
      <input type="checkbox" class="skuvalue{{item.Id}}" data-kid="{{item.Id}}" data-id="{{item.ProductAttrKey_Id }}"><span>{{item.AttrValue}}</span>
    </label>
  </div>
</script>
<script>
  var endHtml = "";
  var chooseSKUValue = [];
  function btnimg() {
    //图标上传
    $.WebUploader({
      uploader: { //图片上传配置
        fileNumLimit: 1, // 验证文件总数量, 超出则不允许加入队列
        fileSingleSizeLimit: 40000, //验证单个文件大小是否超出限制,单位计算/b
        accept: { //现在被上传文件 不可分体的列表
          title: 'Images',
          extensions: 'gif,jpg,jpeg,bmp,png,ico',
          mimeTypes: 'image/*'
        },
        succee: function (rs) {
          $("#Pic").val(rs.Url);
          $("#img-src").attr("src", rs.Url);
          $.msgSucceed("上传成功！")
        }
      }
    });
  }
  $(function () {
    var id = QueryPageUrlString("v");
    var request = {
      Product_Id: id.split('|')[0],
      SkuProperty: id.split('|')[1]
    };
    $.http.json('pattrsku/find', request, {
      pass: function (ress) {
        $('.panel').templateRender({el:"all",data:ress})

        //获取sku_key
        $.http.json('pattrkey/list',{
          Page:{
            index:1,
            size:100000
          }
        },{
          pass:function (res) {
            $.http.json('pattrvalue/list',{
              Page:{
                index:1,
                size:100000
              }
            },{
              pass:function (resv) {
                $.each(res.Data,function (i,item) {
                  var sku_key = "";
                  var html = template("SkuValue",{item:item});
                  sku_key+=html;
                  var sku_val = "";
                  $.each(resv.Data,function (ii,vitem) {
                    if(vitem.ProductAttrKey_Id == item.Id){
                      sku_val += template("SkuValueCheckBox",{item:vitem})
                    }
                  })
                  endHtml+=sku_key.replace("[[sku_value" + item.Id + "]]",sku_val);
                })
                $('#accordionPanels').html(endHtml);
                eachBindData(ress.SkuProperty)
              }
            })
          }
        })
      }
    });

    // 修改
    $('body').on('click','#modifySku', '#add',function () {
      console.log(this)
    })
  })
  function eachBindData(data) {
    var propertyArr = data.split(',');
    $.each(propertyArr, function (i, item) {
      var skus = item.split(':');
      $(".sku_key_item"+skus[0]+" input[type=checkbox]").each(function (j, vitem) {
        if (skus[1] == $(this).data("id")) {console.log(123)
          $(this).attr("checked", "checked");;
        }
      });
    });
  }
  /* 操作SKU选项对应数据做出变化 */
  function EditSKUOfData(obj) {
    chooseSKUValue.push($(obj).find('input').data('kid')+":"+$(obj).find('input').data('id'))
  }
  function setRequest(url) {
    var request = {
      Product_Id:id.split('|')[0],
      SkuName:$('#SkuName').val(),
      SkuProperty:chooseSKUValue,
      SkuPropertyPic:$('#img-src').attr('src'),
      OriginalPrice:$('#OriginalPrice').val(),
      SellPrice:$('#SellPrice').val(),
      Inventory:$('#Inventory').val()
    };
    $.http.request(url,request,{
      pass:function (res) {
        console.log(res)
      }
    })
  }
</script>